<template>
	<view>
		<view class="" style="position: sticky;top: 0%;z-index: 9;">
			<searchTop :isdwopen='isdwopen' :address="address" @openpop='openpop'></searchTop>
		</view>
		<view v-if="isshowpop" @click="isshowpop=false" class="abssj" :style="{top:safeTop}">
			<view class="abssjs">
				<view class="abss_1">
					<view class="flex_b flex_l">
						<uni-icons size="17" type="paperplane-filled" color="#fff"></uni-icons>
						<view class="items">
							{{address?address:'定位中...'}}
						</view>
					</view>
					<view class="flex_b btn" @click="getlocat">
						<uni-icons size="13" type="navigate-filled" color="#fff"></uni-icons>
						<view class="" style="margin-left: 6rpx;">
							定位
						</view>
					</view>
				</view>
				<view class="abss_2">
					<view class="items" v-for="(item,index) in addressList" :key="index" @click="changeAddress(item)">
						<view class="flex_b">
							<uni-icons size="17" type="plus-filled" color="#fff"></uni-icons>
							<view class="test">
								{{ item.province }}{{ item.city }}{{ item.county }}-{{ item.address }}
							</view>
						</view>
						<view class="" @click.stop="removeAddress(item,index)">
							<uni-icons size="17" type="close" color="#fff"></uni-icons>
						</view>
					</view>
					<view class="items" v-if="addressList.length==0 ||addressList.length<2">
						<view class="flex_b" @click.stop="pageaddcity">
							<uni-icons size="17" type="plus-filled" color="#fff"></uni-icons>
							<view class="test">
								添加快捷地址
							</view>
						</view>
					</view>
				</view>
				<view class="abss_3" @click="pagecity">
					<uni-icons type="location-filled" size="17" color="#fff"></uni-icons>
					<view class="test">
						切换城市
					</view>
				</view>
			</view>
		</view>
		<view class="addresskong" v-if="!isdwopen">
			<view class="">
				<image src="../../static/icon/ddw.png" mode=""></image>
				<view class="t1">
					定位服务未开启
				</view>
				<view class="t2">
					请在【设置-应用权限】中打开微信位置权限，我们将为您展示附近的余量实物
				</view>
				<view class="btn" @click="openweizhi">
					开启定位权限
				</view>
			</view>
		</view>
		<view class="" v-else>
			<scroll-view class="flexs" scroll-x enable-flex>
				<view class="x_item" @click="changeCate('',-1)">
					<image src="/static/indexf/1.png" mode=""></image>
					<view class="text" :class="indexs==-1?'acttext':''">全部</view>
				</view>
				<view class="x_item" v-for="(item,index) in categoryList" :key="index"
					@click="changeCate(item.code,index)">
					<image :src="item.icon" mode=""></image>
					<view class="text" :class="indexs==index?'acttext':''">{{item.code}}</view>
				</view>
			</scroll-view>
			<view class="fixed" v-if="select.is4" @click.stop="select.is4=false"></view>
			<view class="changetype" :style="{top:safeTop}">
				<view class="ites" @click="changeis('is1')">
					{{distanceText}}
					<image :style="{transform:select.is1?'rotate(180deg)':''}" src="/static/icon/down.png" mode="">
					</image>

					<view class="ites1abs" v-if="select.is1">
						<view class="i" :style="{color:item.key == distanceText?'#000':''}"
							v-for="(item,index) in abslist" :key="index" @click="changeDistance(item)">
							{{item.key}}
						</view>
					</view>
				</view>
				<view class="ites" :class="select.is2?'itesact':''" @click="changeis('is2')">
					现在可买
				</view>
				<view class="ites " :class="select.is3?'itesact':''" @click="changeis('is3')">
					现在可取
				</view>
				<view class="ites" @click="changeis('is4')">
					品牌
					<view class="tip" v-if="nowlist.length!=0">
						{{nowlist.length}}
					</view>
					<image :style="{transform:select.is4?'rotate(180deg)':''}" src="/static/icon/down.png" mode="">
					</image>
				</view>

				<!-- v-if="select.is4" -->
				<view class="ites2abs" v-if="select.is4">
					<view class="title">
						选择品牌
					</view>
					<view class="radio" @click.stop="selectAll">
						<image v-if="isall" src="../../static/yuana.png" mode=""></image>
						<image v-else src="../../static/yuan.png" mode=""></image>
						全选
					</view>
					<scroll-view :show-scrollbar='false' class="scroll" scroll-y="true">
						<view class="scrollflex">
							<view class="ites" :class="item.default?'itesact':''" @click.stop="selectPP(item)"
								v-for="(item,index) in PPlist" :key="index">
								{{item.dictLabel}}
							</view>
						</view>
					</scroll-view>
					<view class="btns">
						<view class=" b1" @click="handleReset">
							重置
						</view>
						<view class="btn" @click="handleConfirm">
							确认
						</view>
					</view>
				</view>
			</view>
			<view class="tj_shop">
				<view class="title" v-if="!nolist">
					<view class="">
						附近商家 <span>由近到远，所有商家都在这里啦~</span>
					</view>
				</view>
				<!-- 三种情况 一个商品 二个商品 多个商品 -->
				<view class="shop" v-for="(item,index) in hotshoplist" :key="index" @click="pageShop(item)">
					<view class="shoptit">
						<view class="">{{item.shopName}}</view>
						<view class="x"></view>
						<view class="block_flex">
							<view class="block_l">
								<span class="t1">{{item.rating}}</span>
								<image src="/static/icon/x.png" mode=""></image>
								<span class="t2">({{item.replyCount>99?item.replyCount+'+':item.replyCount}})</span>
							</view>
							<view class="block_r">
								<image src="../../static/icon/dw.png" mode=""></image>
								<span>{{item.distanceString}}</span>
							</view>
						</view>
					</view>
					<view class="shopflex">
						<view class="price_item" v-for="(its,i) in item.productList.slice(0,islength)" :key="i"
							@click.stop="pageDetail(item.productList[i].id,item.distanceString)">
							<view class="img">
								<image lazy-load :src="its.img.split(',')[0]" mode="aspectFill"></image>
								<view class="" v-if="its.sellStop != 1 && its.status =='UP'">
									<view class="tip" v-if="its.count <=5">仅剩{{its.count}}份</view>
									<view class="tip" v-else>剩5份+</view>
									<view class="time">
										<image src="../../static/icon/z.png" mode=""></image>
										今天{{its.takeTimeBegin.substring(0,5)}}-{{its.takeTimeEnd.substring(0,5)}}
									</view>
								</view>
								<view class="time1" v-if="its.sellStop == 1 || its.status !='UP'">
									<view class="tflex1" v-if="its.status !='UP'">
										<image src="../../static/icon/x1.png" mode=""></image>
										<view class="">
											未上架
										</view>
									</view>
									<view class="tflex1" v-else-if="its.sellStop == 1">
										<image src="../../static/icon/k.png" mode=""></image>
										<view class="">
											已售罄
										</view>
									</view>
								
									<view class="tflex">
										<image src="../../static/icon/z.png" mode=""></image>
										今天{{its.takeTimeBegin.substring(0,5)}}-{{its.takeTimeEnd.substring(0,5)}}
									</view>
								</view>
							</view>
							<view class="text">{{its.productName}}</view>
							<view class="DINB">
								<span class="ic">￥</span>{{its.price}}
								<span class="FINE"
									style="margin-left: 10rpx;">￥{{its.priceOldBegin}}-{{its.priceOldEnd}}</span>
							</view>
							<view class="tipflex">
								<view class="its" v-for="i in its.category.split(',')" :key="i">{{i}}</view>
							</view>
							<view class="plun">
								<image :src="its.comment.userHead?its.comment.userHead:'/static/toux.png'" mode="">
								</image>
								<view class="tts">{{its.comment.content?its.comment.content:"暂无评价"}}
								</view>
							</view>
						</view>
						<view class="leg1rig" v-if="item.productList.length == 1">
							<image src="../../static/bcg.png" mode=""></image>
							<view class="tflex">
								进店查看
								<uni-icons color='#A37D73' type="right"></uni-icons>
							</view>
						</view>
					</view>
					<view class="check" v-if="item.productList.length > 2"
						@click.stop="change(item.productList.length)">
						<view class="">
							<span v-if="checkAll">查看更多</span>
							<span v-else>收起</span>
							<uni-icons size='16' color="#979797" :type="checkAll?'down':'top'"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			<view class="kong" v-if="nolist">
				<view class="k1">
					<image src="/static/sekong.png" mode=""></image>
					<view class="t1">
						暂无商品
					</view>
				</view>
			</view>


		</view>
		<uv-tabbar :value="1" class="tab"></uv-tabbar>
	</view>
</template>

<script>
	import {
		shopvicinityList,
		getcategoryList,
		getdict,
		addressList,
		addressRemove
	} from '@/common/http.api.js';
	import QQMapwx from '@/minxins/amap-wx.130.js'
	export default {
		data() {
			return {
				address: "",
				isshowpop: false, //显示定位
				isdwopen: true, //定位页面效果
				addressList: [],
				addressRemove: '',
				addressId: '',




				safeTop: uni.getStorageSync('statusBarHeight'),
				categoryList: [], //分类列表
				indexs: -1,
				params: {
					category: '', //分类
					distance: '', //距离(数字)
					canBuy: '', //是否可买
					canTake: '', //是否可取
					brand: '', //品牌
					pageNum: 1,
					pageSize: 10
				},
				checkAll: true,
				hotshoplist: [], //数据列表
				nolist: false,
				islength: 2,

				select: {
					is1: false,
					is2: false,
					is3: false,
					is4: false,
				},
				abslist: [{
						key: '由近到远',
						value: null
					},
					{
						key: '1km以内',
						value: 1000
					},
					{
						key: '3km以内',
						value: 3000
					},
					{
						key: '5km以内',
						value: 5000
					},
					{
						key: '重置',
						value: null
					}
				],
				distanceText: '附近',
				PPlist: [], //品牌列表
				nowlist: [], //选中的品牌列表
				isjump: true
			};
		},
		computed: {
			isall() {
				const isActive = this.PPlist.every((item) => {
					return item.default
				})
				return isActive
			}
		},
		watch: {
			address(nval) {
				if (this.isjump) {
					this.params.pageNum = 1
					this.hotshoplist = []
					this.getshoplist()
				}

			}
		},
		onLoad() {
			this.initialfun()
			getdict('self_shop_brand').then(res => {
				this.PPlist = res.data
			})
			getcategoryList({}).then(res => {
				this.categoryList = res.data
			})
		},
		onShow() {
			this.address = uni.getStorageSync('address').address
			if (uni.getStorageSync('userToken')) {
				addressList({}).then(res => {
					this.addressList = res.rows
				})
			}
			if (uni.getStorageSync('fj')) {
				this.params.pageNum = 1
				this.hotshoplist = []
				this.params.category = uni.getStorageSync('fj').code
				this.indexs = uni.getStorageSync('fj').index
				this.getshoplist()
			}

		},
		onReachBottom() {
			this.params.pageNum++
			this.getshoplist()
		},
		methods: {
			//接受方法 展示或者隐藏定位
			openpop() {
				this.isshowpop = !this.isshowpop
			},
			//获取当前定位 刷新数据
			getlocat() {
				let that = this
				that.isdwopen = true
				that.isjump = false
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					altitude: true,
					success: function(res) {
						const qqmapsdk = new QQMapwx.AMapWX({
							key: 'fec30c445693bf6e07f0c753a07d9667'
						})
						qqmapsdk.getRegeo({
							location: res.longitude + ',' + res.latitude,
							success: (ress) => {
								let u = ress[0].regeocodeData.addressComponent
								let obj = {
									address: u.streetNumber.street + u.streetNumber.number,
									longitude: res.longitude,
									latitude: res.latitude,
									province: u.province,
									city: u.city.length == 0 ? u.province : u.city,
								}
								that.address = obj.address
								uni.setStorageSync('address', obj)
								that.params.pageNum = 1
								that.hotshoplist = []
								that.getshoplist()
								that.$nextTick(() => {
									that.isjump = true
								})
							},
							fail: function(error) {
								console.error(error);
							}
						})

					},
					fail: (err) => {
						console.log(err);
					}
				});
			},
			//检测是否开始定位权限
			initialfun() {
				let that = this
				uni.getSetting({
					success: (res) => {
						if (!res.authSetting['scope.userLocation']) {
							// 未授权，进行授权请求
							this.isshowimg = false
							this.isdwopen = false
							this.address = ''
						}
					}
				})
			},
			//打开定位服务
			openweizhi() {
				uni.authorize({
					scope: 'scope.userLocation',
					success: () => {
						//重新获取权限并判断
						// this.getlocat()
						this.isdwopen = true
					},
					fail: (res) => {
						uni.showModal({
							title: '使用该功能必须允许位置服务，是否重新授权？',
							showCancel: false,
							success: ({
								confirm
							}) => {
								if (confirm) {
									uni.openSetting({
										success: (response) => {
											if (response.authSetting[
													'scope.userLocation']) {
												// 重新获取定位
												// this.getlocat()
												this.isdwopen = true
											} else {}
										},
										fail: () => {}
									})
								}
							},
						})
					},
				})
			},
			//跳转添加快捷地址
			pageaddcity() {
				if (uni.getStorageSync('userToken')) {
					uni.navigateTo({
						url: '/mainpage/addcity'
					})
					this.isshowpop = false
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			//跳转切换城市
			pagecity() {
				uni.navigateTo({
					url: '/mainpage/changecity'
				})
				this.isshowpop = false
			},
			//点击快捷地址
			changeAddress(item) {
				let obj = {
					address: item.address,
					longitude: item.longitude,
					latitude: item.latitude,
					province: item.province,
					city: item.city,
					// county:u.district,
				}
				this.address = item.address
				uni.setStorageSync('address', obj)
			},
			//推荐商家
			getshoplist() {
				this.params = Object.assign(this.params, uni.getStorageSync('address'))
				shopvicinityList(this.params).then(res => {
					this.hotshoplist.push(...res.rows)
					let total = Math.ceil(res.total / this.params.pageSize);
					this.nolist = total == 0
					uni.removeStorageSync('fj')
				})
			},
			pageShop(item) {
				uni.navigateTo({
					url: `/mainpage/shopdetail?id=${item.id}`
				})
			},
			pageDetail(id, distance) {
				uni.navigateTo({
					url: `/mainpage/details?productid=${id}&&distance=${distance}`
				})
			},
			//查看更多
			change(e) {
				this.checkAll = !this.checkAll
				this.checkAll ? this.islength = 2 : this.islength = e
			},
			//分类切换
			changeCate(code, index) {
				this.params.category = code
				this.indexs = index
				this.hotshoplist = []
				this.params.pageNum = 1
				this.getshoplist()
			},
			changeis(value) {
				console.log(value, '123');
				if (value != 'is4') {
					this.select.is4 = false
					this.select[value] = !this.select[value]
				} else {
					this.select[value] = !this.select[value]
				}
				// console.log((value == 'is2' && this.select[value]));
				let canBuy = (value == 'is2' && this.select[value])
				canBuy ? this.params.canBuy = 1 : this.params.canBuy = ''

				let canTake = (value == 'is3' && this.select[value])
				canTake ? this.params.canTake = 1 : this.params.canTake = ''

				if (value == 'is2' || value == 'is3') {
					this.hotshoplist = []
					this.params.pageNum = 1
					this.getshoplist()
				}
			},
			//距离切换
			changeDistance(e) {
				this.distanceText = e.key
				if (e.key == '重置') {
					this.distanceText = '附近'
				}
				this.params.distance = e.value
				this.hotshoplist = []
				this.params.pageNum = 1
				this.getshoplist()
			},
			//品牌选择
			selectPP(item) {
				item.default = !item.default
				this.nowlist = this.PPlist.filter(item => {
					return item.default
				})
			},
			handleReset() {
				this.PPlist.forEach(item => {
					item.default = false
				})
				this.nowlist = []
			},
			handleConfirm() {
				this.params.brand = this.nowlist.map(item => {
					return item.dictLabel
				}).join(',')
				this.select.is4 = false
				this.hotshoplist = []
				this.params.pageNum = 1
				this.getshoplist()
			},
			//全选
			selectAll() {
				if (this.isall) {
					this.PPlist.forEach(item => {
						item.default = false
					})
					this.nowlist = []
				} else {
					this.PPlist.forEach(item => {
						item.default = true
					})
					this.nowlist = this.PPlist
				}

			}
		}
	}
</script>

<style lang="scss">
	.abssj {
		position: fixed;
		z-index: 12;
		color: #fff;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		height: 100vh;
		width: 100%;
		top: 0%;

		.abssjs {
			margin-left: 20rpx;
			width: 492rpx;
			background: rgba(0, 0, 0, 0.8);
			border-radius: 10rpx;
			position: relative;
			padding: 12rpx 0rpx;
			box-sizing: border-box;
		}

		.abssjs:after {
			content: "";
			border: 12rpx solid rgba(0, 0, 0, 0.8);
			border-top-color: transparent;
			border-right-color: transparent;
			border-bottom-color: rgba(0, 0, 0, 0.8);
			border-left-color: transparent;
			width: 0px;
			height: 0px;
			position: absolute;
			top: -24rpx;
			left: 100rpx;
		}

		.abss_1 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0rpx 12rpx;

			.flex_l {
				.items {
					width: 300rpx;
					margin-left: 6rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.btn {
				height: 35rpx;
				background: #29A85C;
				border-radius: 10rpx;
				padding: 0rpx 10rpx;
				font-size: 20rpx;
				line-height: 35rpx;
			}
		}

		.abss_2 {
			margin-top: 15rpx;
			padding: 0rpx 12rpx;

			.items {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 15rpx;

				.test {
					width: 380rpx;
					margin-left: 6rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}

		.abss_3 {
			display: flex;
			border-top: 1px solid #FFFFFF;
			padding: 10rpx 12rpx 0rpx;

			.test {
				margin-left: 6rpx;
			}
		}
	}

	.addresskong {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		text-align: center;
		margin-top: 228rpx;

		image {
			width: 228rpx;
			height: 228rpx;
		}

		.t1 {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #000000;
			margin: 30rpx auto;
		}

		.t2 {
			width: 584rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #666666;
			text-align: left;
			margin: 0rpx auto;
		}

		.btn {
			width: 670rpx;
			height: 100rpx;
			background: #000000;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			text-align: center;
			line-height: 100rpx;
			color: #fff;
			margin: 30rpx auto;
		}
	}








	.kong {
		margin-top: 230rpx;

		.k1 {
			text-align: center;

			image {
				width: 228rpx;
				height: 228rpx;
			}

			.t1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #000000;
			}
		}
	}

	.flexs {
		width: 100%;
		height: 180rpx;
		white-space: nowrap;
		flex-direction: row;
		padding: 20rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #eee;

		.x_item {
			display: inline-block;
			width: 100rpx;
			text-align: center;
			margin-right: 36rpx;

			image {
				width: 90rpx;
				height: 90rpx;
				transform: rotate(0deg);
			}

			.text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #000000;
				height: 32rpx;
				line-height: 32rpx;
			}

			.acttext {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #fff;
				height: 32rpx;
				background: #000000;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				line-height: 32rpx;
			}
		}

		.x_item:active {
			image {
				transform: rotate(20deg);
				background-color: #C5FBC5;
				border-radius: 45rpx;
			}
		}
	}


	.fixed {
		top: 0%;
		width: 100%;
		height: 100vh;
		overflow: hidden;
		position: fixed;
		// background: rgba(0, 0, 0, 0.25);
		z-index: 10;
	}

	.changetype {
		display: flex;
		height: 120rpx;
		align-items: center;
		box-sizing: border-box;
		justify-content: space-between;
		position: sticky;
		background-color: #fff;
		z-index: 10;
		padding: 0rpx 20rpx;
		box-sizing: border-box;

		// box-shadow:0rpx 4rpx 6rpx 0rpx rgba(0,0,0,0.25);
		.ites {
			width: 164rpx;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 24rpx;
				height: 18rpx;
				margin-left: 10rpx;
			}

			.tip {
				min-width: 30rpx;
				font-family: 'BINB';
				line-height: 32rpx;
				text-align: center;
				font-size: 28rpx;
				color: #FFFFFF;
				height: 32rpx;
				background: #000000;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}
		}

		.itesact {
			height: 60rpx;
			background: #000000;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			color: #fff;
			line-height: 60rpx;
		}

		.ites1abs {
			top: 60rpx;
			width: 164rpx;
			position: absolute;
			z-index: 11;
			height: 356rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding: 15rpx 0rpx;
			box-sizing: border-box;

			.i {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #979797;
				padding: 16rpx 0rpx;
				border-bottom: 1px solid #eee;
			}

			.i:last-child {
				border-bottom: none;
			}
		}


		.ites2abs {
			top: 100rpx;
			width: 710rpx;
			position: absolute;
			height: 556rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
			border-radius: 0rpx 0rpx 20rpx 20rpx;
			box-sizing: border-box;
			padding: 32rpx 30rpx;

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				text-align: center;
			}

			.radio {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				position: absolute;
				right: 28rpx;
				top: 32rpx;
				display: flex;
				align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
			}

			.scroll {
				height: 300rpx;
				margin-top: 30rpx;

				::-webkit-scrollbar {
					display: none;
					width: 0 !important;
					height: 0 !important;
					-webkit-appearance: none;
					background: transparent;
				}

				.scrollflex {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.ites {
						text-align: left;
						padding-left: 24rpx;
						width: 50%;
						width: 310rpx;
						height: 60rpx;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						color: #000;
						line-height: 60rpx;
						box-sizing: border-box;
						margin-bottom: 10rpx;
					}

					.itesact {
						text-align: left;
						padding-left: 24rpx;
						width: 50%;
						width: 310rpx;
						height: 60rpx;
						background: #000000;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						color: #fff;
						line-height: 60rpx;
						box-sizing: border-box;
						margin-bottom: 10rpx;
					}
				}
			}

			.btns {
				display: flex;
				margin: 40rpx auto;
				justify-content: space-evenly;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;

				.b1 {
					width: 240rpx;
					height: 80rpx;
					background: #FFFFFF;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 2rpx solid #D9D9D9;
					text-align: center;
					line-height: 80rpx;
					color: #D9D9D9;
				}

				.btn {
					width: 240rpx;
					height: 80rpx;
					background: #000000;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					line-height: 80rpx;
					color: #ffffff;
					text-align: center;
				}
			}
		}
	}

	.tj_shop {
		padding: 20rpx;
		box-sizing: border-box;
		border-top: 1px solid #eee;

		.title {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			font-family: PingFang SC,
				PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #000000;

			span {
				font-weight: 500;
				font-size: 24rpx;
				color: #979797;
				margin-left: 10rpx;
			}
		}

		.shop {
			width: 710rpx;
			padding: 22rpx 10rpx 1rpx;
			box-sizing: border-box;
			// background: linear-gradient(180deg, #FFF7EB 0%, #FFFFFF 41%);
			background: #F3F3F3;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			// border: 1rpx solid #FFF7ED;
			margin-bottom: 20rpx;

			.shoptit {
				display: flex;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
				align-items: center;

				.x {
					width: 3rpx;
					height: 35rpx;
					background-color: #000000;
					margin: 0rpx 10rpx;
				}

				.block_flex {
					flex: 1;
					display: flex;
					justify-content: space-between;
					align-items: center;

					image {
						width: 28rpx;
						height: 28rpx;
						margin: 0rpx 6rpx;
					}

					.block_l {
						display: flex;
						align-items: center;

						.t1 {
							font-family: 'DINB';
							font-size: 32rpx;
							color: #000000;
						}

						.t2 {
							font-family: 'FINE';
							font-weight: 400;
							font-size: 24rpx;
							color: #979797;
						}

					}

					.block_r {
						font-family: 'FINE';
						font-weight: 400;
						font-size: 24rpx;
						color: #000000;
					}
				}
			}

			.shopflex {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin-top: 20rpx;
			}

			.price_item {
				width: 340rpx;
				margin-bottom: 26rpx;

				.img {
					width: 340rpx;
					height: 200rpx;
					position: relative;

					image {
						width: 340rpx;
						height: 200rpx;
						border-radius: 15rpx;
					}

					.tip {
						position: absolute;
						top: 14rpx;
						left: 12rpx;
						height: 32rpx;
						background: #29A85C;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;
						padding: 0 10rpx;
						line-height: 32rpx;
					}

					.time {
						position: absolute;
						bottom: 0%;
						width: 100%;
						height: 40rpx;
						background: rgba(0, 0, 0, 0.5);
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 24rpx;
							height: 24rpx;
							margin-right: 6rpx;
						}

						font-family: PingFang SC,
						PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;
						border-radius: 0rpx 0rpx 15rpx 15rpx;
					}

					.time1 {
						position: absolute;
						top: 0%;
						width: 100%;
						height: 200rpx;
						background: rgba(0, 0, 0, 0.5);
						border-radius: 15rpx;
						display: flex;
						justify-content: center;

						.tflex {
							width: 100%;
							position: absolute;
							bottom: 6rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-family: PingFang SC,
								PingFang SC;
							font-weight: 500;
							font-size: 20rpx;
							color: #FFFFFF;

							image {
								width: 24rpx;
								height: 24rpx;
								margin-right: 6rpx;
							}
						}

						.tflex1 {
							display: flex;
							align-items: center;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 30rpx;
							color: #FFFFFF;

							image {
								width: 44rpx;
								height: 44rpx;
								margin-right: 6rpx;
							}
						}

					}
				}

				.text {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #000000;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-top: 10rpx;
				}

				.tipflex {
					display: flex;
					align-items: center;

					.its {
						height: 44rpx;
						background: #F6F6F6;
						border-radius: 8rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #7B7B7B;
						line-height: 44rpx;
						padding: 0rpx 16rpx;
						margin: 10rpx 8rpx 0rpx 0rpx;
					}
				}

				.plun {
					display: flex;
					margin-top: 15rpx;

					image {
						display: block;
						width: 30rpx;
						height: 30rpx;
						border-radius: 15rpx;
						margin-right: 6rpx;
					}

					.tts {
						flex: 1;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #979797;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
		}

		.check {
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #979797;
			line-height: 30rpx;
			margin-bottom: 20rpx;
		}

		.leg1rig {
			position: relative;

			image {
				width: 340rpx;
				height: 400rpx;
			}

			.tflex {
				position: absolute;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #A37D73;
				display: flex;
				align-items: center;
				top: 112rpx;
				left: 98rpx;
			}
		}
	}
</style>